/// 组件 * CRUD Demo Tsx * 弹框-新增

import type { Loading, ModalProps } from '@expresso/plus'
import { Col, Input, Row, Select, Textarea } from 'ant-design-vue'
import { OPTIONS_GROUP, OPTIONS_SYSTEM } from '../../helpers'
import {
  type SiteDetail,
  type SiteEntity,
  apiAddSite,
  apiMergeSite,
  apiQuerySite,
} from '@/apis/system/project/Site'
import { isSucceed } from '@/helpers'

//# 类型

type AddModalProps = ModalProps<{
  action: 'add' | 'edit'
  id?: number
}>

type FormType = SiteEntity
type DetailType = SiteDetail

export type { AddModalProps }

//# 定义

export default genComponent<AddModalProps>(
  {
    name: 'AddModal',
    props: [...modalPropsKeys],
  },
  (props) => {
    //# 成员

    /** 加载器 */
    const loading = inject<Loading>(ExDialogContextKeys.loading)!

    /** 详情 */
    const detail = shallowRef<DetailType>()

    //// 属性映射 ////

    const action = computed(() => props.params?.action ?? 'add')

    //// 表单 /////

    /** 表单 */
    const form = useForm<FormType>()

    //// 弹框 /////

    /** 弹框-确定 */
    const ok = async () => {
      try {
        await form.api?.validate()
        loading(async () => {
          switch (action.value) {
            case 'add': {
              const res = await apiAddSite(form.getData(true))
              if (isSucceed(res)) {
                props.onOk?.(res.data)
              }
              break
            }
            case 'edit': {
              const data = form.getData(true)
              const res = await apiMergeSite(form.getData(true))
              if (isSucceed(res)) {
                props.onOk?.(data)
              }
              break
            }
          }
        })
      }
      catch { }
    }

    /** 弹框-取消 */
    const cancel = () => {
      props.onCancel?.()
    }

    //# 周期

    onMounted(() => {
      if (action.value === 'edit') {
        loading(async () => {
          form.setData(detail.value = await apiQuerySite(props.params!.id!))
        })
      }
    })

    //# 渲染

    return () => (
      <ExModal width={680} onOk={ok} onCancel={cancel}>
        {/* 表单 */}
        <ExForm {...form.bind}>

          <Row gutter={16}>
            {/* 表单项-站点名称 */}
            <Col span={12}>
              <ExForm.Item label="站点名称" name="siteName" rule={rule().len(20)}>
                <Input />
              </ExForm.Item>
            </Col>

            {/* 表单项-所属系统 */}
            <Col span={12}>
              <ExForm.Item
                label="所属系统"
                name="systemId"
                rule={rule().len(20)}
                readonly={action.value === 'edit'}
                view={findOption(OPTIONS_SYSTEM, detail.value?.systemId)?.label}
              >
                <Select options={OPTIONS_SYSTEM} />
              </ExForm.Item>
            </Col>
          </Row>

          <Row gutter={16}>
            {/* 表单项-所属分组 */}
            <Col span={12}>
              <ExForm.Item label="站点名称" name="groupId" rule={rule()}>
                <Select options={OPTIONS_GROUP} />
              </ExForm.Item>
            </Col>
          </Row>

          {/* 表单项-备注 */}
          <ExForm.Item label="备注" name="remarks">
            <Textarea maxlength={100} rows={3} />
          </ExForm.Item>
        </ExForm>
      </ExModal>
    )
  },
)
